<template>
    <div style="display: flex; justify-content: right;">
        <a-space>
            <a-button @click="openImport"><UploadOutlined />导入</a-button>
            <a-button type="link" size="small" href="./template/部门通讯录导入模板.xlsx">导入模版</a-button>
        </a-space>
    </div>
    
    <div class="m-t-15">
        <BTable :columns='columns' :data='dataRows' row-key="id"></BTable>
    </div>

    <BDrawer v-model:visible='visibleImport' title='导入' width='600px' :confirm='importSubmit'>
        <ImportForm ref="importformRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { listApi, deleteApi } from '@/api/DeptContacts'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import ImportForm from './ImportForm.vue';
import { UploadOutlined } from '@ant-design/icons-vue'
    const tableRef = ref()

    const dataRows = ref<any[]>([])



    const i18n = useI18nStore()
    

    
    const importformRef = ref()
    const visibleImport = ref(false)
    function openImport() {
        visibleImport.value = true
    }
    
    async function importSubmit() {
        const res = await importformRef.value.submit()
        if(res.success) {
            getList()
            visibleImport.value = false
            message.success('导入成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }


    const columns = ref<Column[]>([
        {
            title : '主部门',
            dataIndex : 'mainDept',
        },
        {
            title : '子部门',
            dataIndex : 'dept',
        },
        {
            title : '电话',
            dataIndex : 'tel',
        },
        {
            title : '校区',
            dataIndex : 'location',
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',

            $delete : async(row) => {
                console.log(row)
                const ids = row.id.split(",")
                const res = await deleteApi(Number(ids[0]), Number(ids[1]), Number(ids[2]))
                if(res.success) {
                    getList()
                    message.success(i18n.t('deleteSuccess'))
                }else {
                    message.error(res.msg)
                }
            }
        }

        // {
        //     title : '电话',
        //     dataIndex : 'tel',
        // },

        // {
        //     title : '备注',
        //     dataIndex : 'remark',
        // }
    ])
    


    function getList() {
        dataRows.value.splice(0)
        listApi().then(r => {
            r.data.forEach(item => {
                item.depts.forEach((dept, index) => {
                    dept.contacts.forEach((row, i) => {
                        dataRows.value.push({
                            id : item.id + ',' + index + ',' + i,
                            mainDept : item.dept,
                            dept : dept.dept,
                            tel : row.tel,
                            location : row.location
                        })
                    })
                })
            })
        })
    }

    getList()
    
</script>

<style lang="scss" module>
    .container{
        display: flex;
        .category{
            width: 250px;
            min-width: 250px;
            
            border-right: 1px solid $borderColor;
        }
        .table{
            flex: 1;
        }
    }
</style>